<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>02使用选择器在页面插入编号</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        h1:not(#title){
            text-align: left;
        }
        #num h1:before{
            content: counter(mycounter);
        }
        #num h1{
            counter-increment: mycounter;/*这个值可以自己起名，但要与上面counter()内的值对应*/
        }

        #numAndText h1:before{
            content: "第"counter(mycounter)"章 ";/*字符串连接中间不用加号*/
            color: #00f;
            font-size: 42px;
        }
        #numAndText h1{
            counter-increment: mycounter;
        }

        #numType h1:before{
            /*content: "第"counter(mycounter,upper-alpha)"章 ";*/
            content: "第"counter(mycounter,lower-roman)"章 ";/*可以用列表的样式来控制项目编号的样式，如：list-style-type: lower-roman;*/
            color: #00f;
            font-size: 22px;
        }
        #numType h1{
            counter-increment: mycounter;
        }

        #numNested h1:before{
            /*content: "第"counter(mycounter,upper-alpha)"章 ";*/
            content: "第"counter(mycounter)"章 ";
            color: #00f;
            font-size: 22px;
        }
        #numNested h1{
            counter-reset: subcounter;/*在大标题开始时重置子标题*/
            counter-increment: mycounter;
        }
        h2{
            font-size: 1.3em;
        }
        #numNested h2:before{
            content: "第"counter(subcounter)"节";
            color: #00f;
            font-size: 18px;
        }
        #numNested h2{
            counter-increment: subcounter;
            padding-left: 1em;
        }

        #multNested h1:before{
            content: counter(mycounter)". ";
            color: #00f;
            font-size: 22px;
        }
        #multNested h1{
            counter-reset: subcounter;/*在每次h1开始时重置h2编号*/
            counter-increment: mycounter;
        }
        #multNested h2:before{
            content: counter(mycounter)"-"counter(subcounter)". ";
            color: #00f;
            font-size: 18px;
        }
        #multNested h2{
            counter-reset: subsubcounter;
            counter-increment: subcounter;
            padding-left: 1em;
        }
        #multNested h4:before{
            content: counter(mycounter)"-"counter(subcounter)"-"counter(subsubcounter)". ";
            color: #00f;
            font-size: 18px;
        }
        #multNested h4{
            counter-increment: subsubcounter;
            padding-left: 2em;
        }

        #quote h1{
            quotes:"("")";/*此处必须是两个字符串*/
        }
        #quote h1:before{
            content: open-quote;
        }
        #quote h1:after{
            content: close-quote;
        }
        /*跟上面显示效果一样，而且还少两行代码，不知为何要这样！*/
        #quote h2:before{
            content: "(";
        }
        #quote h2:after{
            content: ")";
        }
    </style>
</head>
<body>
<h1 id="title">2-2使用选择器在页面插入编号</h1>
<h3>插入编号</h3>
<code>
    #num h1:before{
        content: counter(mycounter);
    }
    #num h1{
        counter-increment: mycounter;/*这个值可以自己起名，但要与上面counter()内的值对应*/
    }

</code>
<section id="num">
    <h1>大标题</h1>
    <p>示例文字。</p>
    <h1>大标题</h1>
    <p>示例文字。</p>
    <h1>大标题</h1>
    <p>示例文字。</p>
</section>

<h3>插入编号和文字+样式</h3>
<code>
    #numAndText h1:before{
        content: "第"counter(mycounter)"章 ";/*字符串连接中间不用加号*/
        color: #00f;
        font-size: 42px;
    }
    #numAndText h1{
        counter-increment: mycounter;
    }
</code>
<section id="numAndText">
    <h1>大标题</h1>
    <p>示例文字。</p>
    <h1>大标题</h1>
    <p>示例文字。</p>
    <h1>大标题</h1>
    <p>示例文字。</p>
</section>

<h3>插入编号和文字+样式，可以试试不同的样式编号</h3>
<code>
    #numType h1:before{
        /*content: "第"counter(mycounter,upper-alpha)"章 ";*/
        content: "第"counter(mycounter,lower-roman)"章 ";/*可以用列表的样式来控制项目编号的样式，如：list-style-type: lower-roman;*/
        color: #00f;
        font-size: 22px;
    }
    #numType h1{
        counter-increment: mycounter;
    }
</code>
<section id="numType">
    <h1>大标题</h1>
    <p>示例文字。</p>
    <h1>大标题</h1>
    <p>示例文字。</p>
    <h1>大标题</h1>
    <p>示例文字。</p>
</section>

<h3>编号嵌套</h3>
<code>
    #numNested h1:before{
        /*content: "第"counter(mycounter,upper-alpha)"章 ";*/
        content: "第"counter(mycounter)"章 ";
        color: #00f;
        font-size: 22px;
    }
    #numNested h1{
        counter-reset: subcounter;/*在大标题开始时重置子标题*/
        counter-increment: mycounter;
    }
    h2{
        font-size: 1.3em;
    }
    #numNested h2:before{
        content: "第"counter(subcounter)"节";
        color: #00f;
        font-size: 18px;
    }
    #numNested h2{
        counter-increment: subcounter;
        padding-left: 1em;
    }
</code>
<section id="numNested">
    <h1>大标题</h1>
    <h2>中标题</h2>
    <h2>中标题</h2>
    <h2>中标题</h2>
    <h1>大标题</h1>
    <h2>中标题</h2>
    <h2>中标题</h2>
    <h2>中标题</h2>
</section>

<h3>多层编号嵌套</h3>
<code>
    #multNested h1:before{
        content: counter(mycounter)". ";
        color: #00f;
        font-size: 22px;
    }
    #multNested h1{
        counter-reset: subcounter;/*在每次h1开始时重置h2编号*/
        counter-increment: mycounter;
    }
    #multNested h2:before{
        content: counter(mycounter)"-"counter(subcounter)". ";
        color: #00f;
        font-size: 18px;
    }
    #multNested h2{
        counter-reset: subsubcounter;
        counter-increment: subcounter;
        padding-left: 1em;
    }
    #multNested h4:before{
        content: counter(mycounter)"-"counter(subcounter)"-"counter(subsubcounter)". ";
        color: #00f;
        font-size: 18px;
    }
    #multNested h4{
        counter-increment: subsubcounter;
        padding-left: 2em;
    }
</code>
<section id="multNested">
    <h1>大标题</h1>
    <h2>中标题</h2>
    <h4>小标题</h4>
    <h4>小标题</h4>
    <h2>中标题</h2>
    <h4>小标题</h4>
    <h4>小标题</h4>
    <h1>大标题</h1>
    <h2>中标题</h2>
    <h4>小标题</h4>
    <h4>小标题</h4>
    <h2>中标题</h2>
    <h4>小标题</h4>
    <h4>小标题</h4>
</section>

<h3>在两边添加嵌套文字符号</h3>
<code>
    #quote h1{
        quotes:"("")";/*此处必须是两个字符串*/
    }
    #quote h1:before{
        content: open-quote;
    }
    #quote h1:after{
        content: close-quote;
    }
    /*跟上面显示效果一样，而且还少两行代码，不知为何要这样！*/
    #quote h2:before{
        content: "(";
    }
    #quote h2:after{
        content: ")";
    }

</code>
<section id="quote">
    <h1>大标题</h1>
    <h2>中标题</h2>
    <h4>小标题</h4>
</section>
</body>
</html>